<template>
  <view class="shop_process_box">
    <view class="shop_detail_bg"></view>
    <u-navbar
        title="领食周边购霸王餐"
        placeholder
        titleStyle="color:#ffffff"
        :bgColor="scHeight>1 ? '#FEAD24' : 'transparent'"
    >
      <template #left>
        <view class="content" @click="okBack">
          <u-icon name="arrow-left" color="#FFFFFF" size="20"></u-icon>
        </view>
      </template>

      <!-- #ifdef APP-PLUS || H5 -->
      <!--<template #right>
        <view class="top_share_box" style="padding: 10rpx" @click="share" >
          <view class="tishi_box"><text class="tishi_text">分享奖8元</text><view class="sjx"></view></view>
          <u-icon class="share_icon" :name="currentIcon" size="26" color="#0CBB2F"></u-icon>
        </view>
      </template>-->
      <!-- #endif -->
    </u-navbar>
    <view class="shop_process_content">
      <scroll-view scroll-y="true">
        <!-- 店铺信息 -->
        <view v-if="shopGF?.shop_name" class="shops_list">
          <view class="shop_list_item">
            <view class="shop_info">
              <view class="shop_mingzi">
                <view class="shop_name ellipsis-two-line">{{ shopGF?.shop_name }}</view>
              </view>
              <view class="adress_shop">
                <text class="place_text" style="padding-right: 10rpx;min-width: 190rpx;">配送时长 : {{ shopGF?.deliveryTimeTip }}</text>
                <text style="height: 26rpx;margin: 6rpx 10rpx;border-right: 2rpx #E5E5E5 solid"></text>
                <text class="place_text" style="padding-right: 10rpx;">距离 : {{ shopGF?.deliveryDistance || '0km' }}</text>
                <text style="height: 26rpx;margin: 6rpx 10rpx;border-right: 2rpx #E5E5E5 solid"></text>
                <image v-if="shopGF?.is_comment == 1" :src="BaseImgUrl + '/shop/shopdetail/shopdetail_gf_cjf.png'" style="width: 90rpx;height: 28rpx;padding-left: 10rpx;"></image>
                <image v-if="shopGF?.is_comment == 2" :src="BaseImgUrl + '/shop/shopdetail/shopdetail_gf_scg.png'" style="width: 90rpx;height: 28rpx;padding-left: 10rpx;"></image>
              </view>
            </view>
            <view class="shop_info_img">
              <image v-if="shopGF?.picture" :src="shopGF?.picture" mode="widthFix" style="width: 100%;"></image>
              <image v-else
                     src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                     mode="widthFix" style="width: 100%;border-radius: 20rpx;"></image>
              <!--<view style="position: absolute;top: 0;margin-top: 0;right: 0">
                <image style="width: 64rpx;height: 32rpx;border-radius: 0"
                       :src="BaseImgUrl+'/guanfan/home/gf_icon1.png'"></image>
              </view>-->
            </view>
          </view>
          <view class="shop_list_info">
            <view class="shop_list_info_warp" style="position: relative">
              <!--气泡提示盒子-->
              <view v-if="newUser == '新用户' && isShowTipsBox" @click="isShowTipsBox = false" class="tips_box">
                <view class="tips_icons">
                  <u-icon name="arrow-up-fill" color="#555555" size="14"></u-icon>
                </view>
                <view class="tips_text">
                  <text  class="tips_text_title">首单按比例返款后，至多再得{{ twoFixed(shopGF?.member_commission.maxCommission) }}元-返款=差额补贴红包</text>
                  <u-icon name="close" color="#fffff" size="18"></u-icon>
                </view>
              </view>
              <view style="display: flex;align-items: center;">
                <view class="shop_type">返</view>
                <view v-if="newUser == '新用户'" class="place_text">实付金额{{ twoFixed(shopGF?.member_commission.ratio) }}%</view>
                <view v-if="newUser == '老用户'" class="place_text">实付金额{{ userInfo.is_member === 0 ? twoFixed(shopGF?.general_commission.ratio) : twoFixed(shopGF?.member_commission.ratio) }}%</view>
              </view>
              <view style="display: flex;align-items: center;" :style="{marginLeft: newUser == '老用户'? ' 12rpx;': ''}">
                <view v-if="newUser == '新用户'" class="shop_type" style="margin-left: 10rpx;">新人全额返</view>
                <view v-if="newUser == '新用户'" class="place_text">最高返{{ twoFixed(shopGF?.member_commission.maxCommission)}}</view>
                <view v-if="newUser == '老用户'" class="place_text">最高返{{ userInfo.is_member === 0 ? twoFixed(shopGF?.general_commission.maxCommission) : twoFixed(shopGF?.member_commission.maxCommission)}}</view>
              </view>
              <view v-if="shopGF.is_comment == 1" class="shop_info_warp_type" style="">图文品鉴</view>
              <view v-if="shopGF.is_comment == 2" class="activityNum_evaluate" style="">无需评鉴</view>

            </view>
          </view>
          <view v-if="Number(shopGF?.code) == 3" class="count_down_box">
            <view class="shop_list_info_text">请在</view>
            <!--倒计时-->
            <view class="shop_count_down">
              <lszbg-uni-count-down
                  :timeItem="shopGF.end_time"
                  :is-day="false"
                  :is-hour="true"
                  :is-minute="true"
                  :timeStyle="{fontSize: 14,color: '#ffffff', background: '#FF7900'}">
              </lszbg-uni-count-down>
            </view>
            <view class="shop_list_info_text">内前往美团点外卖</view>
          </view>
        </view>
        <!-- 订单流程 -->
        <view class="shop_process_wrap">
          <view class="shop_process_wrap_bg"><image :src="BaseImgUrl + '/shop/process/process_bg01.png'" style="width: 100%;height: 260rpx;"></image></view>
          <view class="shop_process_wrap_title"><image :src="BaseImgUrl + '/shop/process/process_title01.png'" mode="heightFix" style="width: 186rpx;height: 40rpx;"></image></view>
          <view class="shop_process_wrap_content">
            <view class="process_wrap_top">
              <view class="process_wrap_top_img">
                <image :src="BaseImgUrl + '/shop/process/process_meituan.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
              </view>
              <view class="process_wrap_line " :class="Number(shopGF.code) === 4 ? 'process_wrap_line_active' : ''"></view>
              <view class="process_wrap_top_img">
                <image :src="BaseImgUrl + '/shop/process/process_lingshi.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
              </view>
              <view class="process_wrap_line"></view>
              <view class="process_wrap_top_img">
                <image :src="BaseImgUrl + '/shop/process/process_money.png'" mode="widthFix" style="width: 68rpx;height: 68rpx"></image>
              </view>
            </view>
            <view class="process_wrap_bottom">
              <view class="shop_process_wrap_content_item item_left">
                <view class="shop_process_wrap_content_item_title">美团点外卖</view>
                <view class="shop_process_wrap_content_item_text">30分钟内完成</view>
              </view>
              <view class="shop_process_wrap_content_item item_center">
                <view class="shop_process_wrap_content_item_title">收到外卖后</view>
                <view class="shop_process_wrap_content_item_text">回领食继续下一步</view>
              </view>
              <view class="shop_process_wrap_content_item item_right">
                <view class="shop_process_wrap_content_item_title">返现到账</view>
                <view class="shop_process_wrap_content_item_text">微信秒打款</view>
              </view>
            </view>
          </view>
        </view>
        <!--首单返利提示-->
        <view v-if="newUser == '新用户'" class="shop_first_tip">
          <view class="shop_process_tip_content">
            <view class="shop_first_img">
              <image :src="BaseImgUrl + '/order/red_icon01.png'" style="width: 32rpx;height: 36rpx;padding-right: 10rpx;"></image>
              <image :src="BaseImgUrl + '/order/free_icon.png'" style="width: 100rpx;height: 34rpx;padding-right: 10rpx;"></image>
            </view>
            <view class="shop_first_text_box">
              <view class="tips_text">
                <text class="tips_text_title">首单按比例返款后，至多再得{{ twoFixed(shopGF?.member_commission.maxCommission) }}元-返款=差额补贴红包</text>
              </view>
            </view>
          </view>
        </view>
        <!--下单步数, 点击报名后显示-->
        <view v-if="Number(shopGF?.code) == 3" class="shop_process_gf_num">
          <!--<view class="shop_process_num_left">
            <view class="shop_process_num_left_line"><u-line direction="col" color="#D3D3D3" :dashed="true"></u-line></view>
          </view>-->
          <shop_process_gf_num
              :shopGF="shopGF"
              :pathGF="pathGF"
              :signUp="signUp"
              :newUser="newUser"
              :userInfo="userInfo"
              @orderGfNoFun="orderGfNoFun"
              @PlaceOrderFun="PlaceOrderFun"
          >
          </shop_process_gf_num>
        </view>
        <!--同步外卖订单，进入美团店铺下单后显示-->
        <view v-if="Number(shopGF?.code) == 4" class="shop_process_gf_orderNo">
          <!--活动提示-->
          <view class="shop_process_tip">
            <view class="shop_process_tip_content">
              <image :src="BaseImgUrl + '/shop/process/process_icon04.png'" mode="widthFix" style="width: 44rpx;padding-right: 10rpx;"></image>
              <view class="tip_text">
                <view v-if="shopGF?.is_comment === 2" class="tip_text_scroll">本活动<text style="color: #FF7900">无需评价</text>，收到外卖后直接获得返利。</view>
                <view v-if="shopGF?.is_comment === 1" class="tip_text_scroll">本活动需要上传<text style="color: #FF7900">图文品鉴</text>凭证，否则无法参与活动返利。</view>
              </view>
              <!--<u-notice-bar :text="tipText" bgColor="#ffffff"></u-notice-bar>-->
            </view>
          </view>
          <shop_process_gf_order-no
              :shopGF="shopGF"
              :newUser="newUser"
              :userInfo="userInfo"
          ></shop_process_gf_order-no>
        </view>
        <!--已报名，未下单（无需评价）-->
        <view v-if="Number(shopGF?.code) == 3" class="shop_process_takeout_btn">
          <view class="shop_process_takeout_btn_text">已报名，未下单</view>
        </view>
        <!--已下单（无需评价）-->
        <view v-if="Number(shopGF?.code) == 4 && shopGF?.is_comment == 2" class="shop_process_takeout_btn">
          <view class="shop_process_takeout_btn_text">待收餐</view>
        </view>
        <!--已下单（图文品鉴）-->
        <view v-if="Number(shopGF?.code) == 4 && shopGF?.is_comment == 1" @tap="evaluateFun(1)" class="shop_process_takeout_btn">
          <view class="shop_process_takeout_btn_text">已下单，去美团评价获得返利</view>
        </view>
        <!--已评价，审核中-->
        <view v-if="Number(shopGF?.code) == 99  && shopGF?.is_comment == 1" class="shop_process_takeout_btn">
          <view class="shop_process_takeout_btn_text">已评价，审核中</view>
        </view>
        <!--已完成-->
        <view v-if="Number(shopGF?.code) == 100" class="shop_process_takeout_btn">
          <view class="shop_process_takeout_btn_text">订单完成，返利已到账</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue"
import {onLoad, onPageScroll, onShow} from "@dcloudio/uni-app";
import LszbgUniCountDown from "../components/LszbgUniCountDown.vue";
import {BaseImgUrl} from "../utils/lshttp";
import Shop_process_gf_num from "./components/shop_process_gf_num.vue";
import Shop_process_gf_orderNo from "./components/shop_process_gf_orderNo.vue";
import {toAppletPage} from "../utils/utils";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
const userInfoStore = useUserInfoStore()
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器
const userInfo = userInfoStore.userInfo
const newUser = ref() // 是否是新用户
const shopGF = ref() // 报名信息
const pathGF = ref() // 官返店铺路径
const signUp = ref(0)
const orderGfNoVal = ref(false) // 点外卖的状态

const isShowTipsBox = ref(false) // 首单提示是否显示
onLoad((options) => {
  shopGF.value = JSON.parse(decodeURIComponent(options.shopGF))
  // 测试官返订单，记得注释
  shopGF.value = {...shopGF.value, code: 4, is_comment: 2}
  console.log('shopGF=', shopGF.value)
  if (userInfoStore.isNewUser){
    newUser.value = "新用户"
    isShowTipsBox.value = true
  }else {
    newUser.value = "老用户"
    isShowTipsBox.value = false
  }
  signUp.value = options.signUp
  console.log('signUp', options.signUp)
})
onShow(() => {

})

// 去美团评价 type 1美团订单列表 2美团评价截图
const evaluateFun = (type) => {
  // shopType：1、美团；2、饿了么；3、京东
  toAppletPage(1, type)
}
const scHeight = ref(0)
onPageScroll((e) => {
  scHeight.value = e.scrollTop
  // console.log('滚动距离==', e.scrollTop)
})
// 返回上个页面
const okBack = () => {
  uni.reLaunch({url: '/pages/order/order'});
}
// 订单提示是否显示
const isProcessTip = ref(false)
// 跳转美团店铺下单，返回页面后1分钟显示官返信息同步状态
const isPlaceOrder = ref(false)
const PlaceOrderFun = (res) => {
  console.log('res=', res)
  isPlaceOrder.value = true
  // shopGF.value.code = 4
}
// 点击第一步后显示第二部的进度条
const orderGfNoFun = (res) => {
  orderGfNoVal.value = res
}
</script>


<style lang="scss">
page{
  width: 100%;
  height: 100%;
  background-color: #F4F4F4;
}
.shop_process_box{
  position: relative;
  width: 100%;
  height: 100%;
  .shop_process_content{
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    position: relative;
    z-index: 10;
  }
}
.shop_detail_bg{
  height: 650rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background:linear-gradient( 180deg, #FEAD24 0%, rgba(253,124,30,0) 100%);
}
/* 店铺信息 */
.shops_list {
  width: 93%;
  margin: 20rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  z-index: 9;
  position: relative;

  .shifupeisong {
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;
    color: #666;
    font-size: 24rpx;

    .icons_box {
      display: flex;
      justify-content: space-between;

      view {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .copy_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 44rpx;
          height: 44rpx;
          background: url('https://lsz.lszbg.com/imgs/old/copy_icon.png') no-repeat center center / 100% 100%;
          margin-right: 5rpx;
        }
      }

      .ps_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/ps_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/sb_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          height: 30rpx;
          position: relative;
          top: -5rpx;
        }
      }
    }
  }

  .pijiangonggao {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 45rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .shop_dizhi {
    display: flex;
    align-items: flex-start;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 56rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .manjian_box {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx) 30rpx;
    border-top: 1px solid #EEEEEE;
    font-size: 24rpx;

    .man_tag {
      background-color: #F97632;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #ffffff;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

    view {
      margin-right: 20rpx;
    }

    text {
      color: #FF6433;
    }
  }

  .shop_list_item {
    background-color: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 20rpx 20rpx 0;
    display: flex;
    align-items: flex-start;

    .shop_info {
      flex: 1;
      padding-right: 20rpx;
      padding-left: 0;
      .shop_name {
        line-height: 44rpx;
        font-size: 32rpx;
        color: #333333;
        padding: 10rpx 0;
        font-weight: bold;
        flex: 1;
      }
      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
      }
      .adress_shop {
        display: flex;
        align-items: center;
        justify-content: left;
        margin-top: 20rpx;

        .place_text {
          font-size: 24rpx;
          color: #888;
          margin-left: 10rpx;
          line-height: 44rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .shop_type {
          display: inline-block;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }

        .shop_type3 {
          background-color: #db2727;
          color: #FFFFFF;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 0 6rpx;
          height: 36rpx;
          line-height: 36rpx;
        }

        .elemtag {
          background-color: #17aeff;
          color: #ffffff;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }
      }


      .yysjandejuli_box {
        display: flex;
        align-items: center;
        margin: 24rpx 0 0 0;
        font-size: 24rpx;

        .yysj_text {
          background-color: #f1f1f1;
          border-radius: 8rpx;
          padding: 10rpx 6rpx;
          font-size: 20rpx;
          text-align: center;
        }

        .shop_juli {
          color: #555555;
          padding-left: 20rpx;
          font-size: 24rpx;
        }
      }

      .shop_yuliang {
        display: flex;
        align-items: center;

        .jindutiao {
          flex: 1;
        }

        .shengyu {
          padding-left: 20rpx;
          color: #FF6433;
          font-size: 24rpx;
        }
      }
    }
    .shop_info_img{
      width: 120rpx;
      height: 120rpx;
      position: relative;
      border-radius: 20rpx;
      overflow: hidden;
    }
  }

  .shop_list_info{
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    .shop_mingzi {
      margin-bottom: 20rpx;

      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
        text-align: left;
      }
    }
    .shop_list_info_warp{
      height: 60rpx;
      display: flex;
      align-items: center;
      .shop_info_warp_type{
        padding: 0 10rpx;
        height: 36rpx;
        line-height: 36rpx;
        font-size: 22rpx;
        color: #FF4444;
        border: 2rpx solid #FF4444;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 12rpx;
      }
      .activityNum_evaluate{
        height: 36rpx;
        line-height: 36rpx;
        font-size: 22rpx;
        color: #2DB327;
        text-align: center;
        padding: 0 10rpx;
        background: #F5FFF5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #74D87F;
        margin-left: 12rpx;
      }
      .shop_type{
        background: #FD7C22;
        color: #FFFFFF;
        font-size: 24rpx;
        // width: 50rpx;
        padding: 0 10rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        border-radius: 6rpx 0 0 6rpx;
      }
      .place_text{
        min-width: 120rpx;
        height: 36rpx;
        line-height: 36rpx;
        padding: 0 10rpx;
        border: 2rpx solid #FD7C22;
        border-radius: 0 6rpx 6rpx 0;
        color: #FD7C22;
        font-size: 22rpx;
        text-align: center;
      }
      /* 气泡提示盒子css */
      .tips_box{
        width: 320rpx;
        position: absolute;
        top: 60rpx;
        left: 234rpx;
        .tips_icons{
          position: absolute;
          left: 10rpx;
          top: -18rpx;
        }
        .tips_text{
          display: flex;
          align-items: baseline;
          padding: 4rpx 8rpx;
          background-color: rgba(0,0,0,.6);
          color: #fff;
          font-size: 22rpx;
          border-radius: 10rpx;
          .tips_text_title{
            line-height: 34rpx;
            padding-right: 10rpx;
          }
        }
      }
    }
  }
  /* 倒计时box */
  .count_down_box{
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 30rpx;
    background: #FFF4E6;
    border-radius: 0 0 20rpx 20rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #666666;
    & .shop_count_down{
      padding: 6rpx 10rpx 0;
      & .uni-countdown{
        display: inline;
        & .uni-countdown__number{
          padding: 4rpx 6rpx 0;
        }
      }
    }
  }
}
/* 下单流程css */
.shop_process_wrap{
  width: 93%;
  height: 260rpx;
  margin: 0 auto;
  border-radius: 20rpx;
  position: relative;
  .shop_process_wrap_bg{
    width: 100%;
    height: 260rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    overflow: hidden;
  }
  .shop_process_wrap_title{
    height: 40rpx;
    padding: 20rpx 30rpx;
  }
  .shop_process_wrap_content{
    padding: 0 30rpx 20rpx;
    .process_wrap_top{
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .process_wrap_top_img{
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .process_wrap_line{
        width: calc(50% - 105rpx);
        height: 12rpx;
        background: #E5E5E5;
      }
      .process_wrap_line_active{
        background: #FCB141;
      }
    }
    .process_wrap_bottom{
      display: flex;
      .shop_process_wrap_content_item{
        width: calc(100% / 3);
        .shop_process_wrap_content_item_title{
          font-size: 24rpx;
          color: #333333;
        }
        .shop_process_wrap_content_item_text{
          font-size: 22rpx;
          color: #666666;
        }
      }
      .item_left{
        text-align: left;
      }
      .item_right{
        text-align: right;
      }
      .item_center{
        text-align: center;
      }
    }
  }
}
/* 下单步数 */
.shop_process_gf_num{
  width: 93%;
  height: 670rpx;
  margin: 20rpx auto 120rpx;
  border-radius: 20rpx;
  background: #FFFFFF;
  display: flex;
  .shop_process_num_left{
    width: 36rpx;
    padding: 30rpx;
    position: relative;
    .shop_process_num_left_line{
      width: 2rpx;
      height: 80%;
      padding-left: 20rpx;
    }
    .shop_process_num_left_content{

      .shop_process_num_left_content_item{
        width: 36rpx;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        font-size: 28rpx;
        position: absolute;
        left: 32rpx;
        z-index: 1;
        color: #FFFFFF;
        border-radius: 50%;
        background: #CDCDCD;
      }
      .line_top{
        top: 30rpx;
      }
      .line_bottom{
        bottom: 16%;
      }
      .line_center{
        top: 42%;
      }
      .shop_process_num_left_content_item_active{
        background: #FD7C22;
      }
    }
  }

}
/* 同步外卖订单css */
.shop_process_gf_orderNo{

}
/* 首单返利提示css */
.shop_first_tip{
  width: 93%;
  min-height: 64rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  color: #666666;
  background: linear-gradient( 270deg, #FFFFFF 0%, #FFF1F1 100%);
  .shop_process_tip_content{
    display: flex;
    align-items: center;
    padding: 20rpx 8rpx;
    .shop_first_img{
      width: 160rpx;
    }
    .shop_first_text_box{
      flex: 1;
      color: #666666;
      font-size: 24rpx;
      border-radius: 10rpx;
      .tips_text_title{
        line-height: 34rpx;
      }
    }
  }
}
/* 提交订单号提示 */
.shop_process_tip{
  width: 93%;
  min-height: 64rpx;
  margin: 20rpx auto;
  border-radius: 16rpx;
  color: #666666;
  background: #FFFFFF;
  .shop_process_tip_content{
    /* min-height: 64rpx;
    line-height: 44rpx; */
    padding: 10rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    .tip_text{
      flex: 1;
      overflow: hidden;
      padding: 12rpx 0;
      .tip_text_scroll{
        white-space: nowrap;
        animation: scrollRightToLeft 10s linear infinite;
      }
    }

  }
  @keyframes scrollRightToLeft {
    from {
      transform: translateX(100%); /* 从右侧开始 */
    }
    to {
      transform: translateX(-100%); /* 向左侧滚动 */
    }
  }
}
/* 外卖已收到按钮css */
.shop_process_takeout_btn{
  width: calc(100% - 60rpx);
  height: 80rpx;
  position: fixed;
  bottom: 0;
  z-index: 999;
  background: #FFFFFF;
  padding: 20rpx 30rpx env(safe-area-inset-bottom);
  box-shadow: 0 8rpx 20rpx 0 rgba(0,0,0,0.3);
  .shop_process_takeout_btn_text{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    border-radius: 50rpx;
    margin-bottom: 20rpx;
  }
}
</style>
